<template>
  <el-cascader
    v-model="dataValue"
    :options="options"
    :props="{ expandTrigger: 'hover', checkStrictly: attrs.checkStrictly, multiple: attrs.multiple }"
    @change="valueChange"
    style="width: 100%"
    :placeholder="attrs.placeholder ? attrs.placeholder : `请选择${label}`"
    :disabled="disabled"
    :clearable="attrs.clearable"
    :show-all-levels="attrs.showAllLevels"
    :collapse-tags="attrs.collapseTags"
    :filterable="attrs.filterable">
    <template slot-scope="{ node, data }">
      <span v-if="!attrs.template">{{ data.label }}</span>
      <component v-else :is="attrs.template" :data="data" :node="node"  />
    </template>
  </el-cascader>
</template>
<script type="text/javascript">
import XMixIn from './XMixIn'
import CityData from './js/city-data'
export default {
  mixins: [XMixIn],
  data () {
    return {
      options: []
    }
  },
  created () {
    let level = 3
    this.attrs.level !== undefined ? level = this.attrs.level : level = 3
    this.cityChildren(CityData, 0, level)
    this.options = CityData
  },
  methods: {
    cityChildren (list, level, okLevel) {
      level++
      for (let index = 0; index < list.length; index++) {
        const item = list[index]
        if (level === okLevel) {
          item.children = undefined
        }
        if (item.children) {
          this.cityChildren(item.children, level, okLevel)
        }
      }
    }
  }
}
</script>
